Vue.js（/vjuː/，簡稱Vue）是一個用於建立使用者介面的開源MVVM前端JavaScript框架，也是一個建立單頁應用的Web應用框架。--維基百科

Vue基本架構

//js
const vm = Vue.createApp({
    data(){
        return{
            text:"hello world",
        }
    },
    methods:{
        show:function(){
            this.text=this.text+"!!!"
        }
    }
})

vm.mount("#idname")

data以function形式儲存資料，vm.mount掛載於id為idname的位置上。

mount 掛載
掛載可理解為作用範圍，Vue元件作用於被掛載的<tag>標籤內</tag>

//html
<div id="idname">
    {{text}}
</div>

此處的div即為前述vue所掛載位置(id="idname")，div所包圍的範圍內皆可使用已掛載之Vue的資料(data)與方法(methods)
{{ text }}是引用Vue data的方法，會連同" {{ }} "直接替換成text內容也就是" hello world "。

v-on

//html
<div id="idname">
    {{text}}
--> <input type="submit" @click="show()" value="submit">
</div>

input設置為submit type並且@click事件，在此input被點擊(click)之後執行show( )使得網頁內容的"hello world"後面增加"!!!"

@click="show( )" 是 v-on:click="show( )" 的簡寫

v-model

//html
<div id="idname">
    {{text}}
--> <input type="textarea" v-model="text" value="">
</div>

input type為textarea使用者可輸入字串，v-model雙向綁定vue data內的text並與input同步，input更改會連動text並且同時{{ text }}會跟著更新。

雙向綁定 當其中一者更改，另一方也會跟著更動。

v-for

//html
<div v-for="i in arr">{{text}}</div>

依照arr內個數迭代，有多少個做多少個